import React, { Component } from 'react'
// 导入要使用的组件
import {CSSTransition} from 'react-transition-group'
// 导入css文件，看效果
import './Transition1.css'

export default class Transition1 extends Component {
  constructor() {
    super()
    this.state = {
      inProp: false
    }
  }
  setInProp(){
    this.setState({
      inProp: true
    })
  }
  render() {
    return (
      <div>
        {/* in控制是否显示 */}
        {/* timeout动画执行时常 */}
        {/* classNames指定的class前缀。用来添加动画效果 */}
        <CSSTransition in={this.state.inProp} timeout={200} classNames="my-node">
        <div>
          {"I'll receive my-node-* classes"}
        </div>
      </CSSTransition>
      <button type="button" onClick={() => this.setInProp(true)}>
        Click to Enter
      </button>
      </div>
    )
  }
}
